<template>
  <view :style="style">
    <view class="empty-view" />
    <view class="login-header">
      <image
        v-if="!imageError"
        class="login-header-logo"
        :src="loginLogoUrl"
        :style="loginLogoStyle"
        mode="aspectFit"
        @error="onImageError"
      />
      <view v-else class="image-error">
        <je-icon icon="fal fa-image-slash" size="100" />
        <view>{{ $t('login.message.imageError') }}</view>
      </view>
    </view>
    <view class="login-dept">
      <view class="login-dept-title">{{ $t('login.message.chooseDepartment') }}</view>
      <view class="login-dept-items">
        <view
          v-for="(dept, index) in state.depts"
          :key="index"
          class="login-dept-items-item"
          @click="doLogin(dept)"
          >{{ dept.name }}</view
        >
      </view>
    </view>
  </view>
</template>
<script>
  import { useThirdLogin } from './hooks/use-third-login';
  export default {
    name: 'LoginPage',
    options: { styleIsolation: 'shared' },
    setup(props, context) {
      return useThirdLogin({
        props,
        context,
      });
    },
  };
</script>
<style lang="scss">
  /* #ifdef MP-WEIXIN */
  .empty-view {
    height: calc(50px + var(--status-bar-height));
  }
  /* #endif */

  /* #ifndef MP-WEIXIN */
  .empty-view {
    height: calc(30px + var(--status-bar-height));
  }
  /* #endif */
  .image-error {
    color: $je-gray-6;
    text-align: center;
    font-size: 18px;
  }

  .login-header {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    max-height: 300px;
    .login-header-logo {
      width: 160px;
      height: 160px;
    }
  }

  .login-dept {
    padding: 20px 10%;
    &-title {
      font-size: 20px;
      text-align: center;
    }

    &-items {
      padding-top: 20px;
      &-item {
        height: 48px;
        line-height: 48px;
        font-size: 17px;
        padding: 0 20px;
        color: $je-text-color;
        border-bottom: 1px solid #f5f5f5;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        cursor: pointer;
        &:hover {
          color: $je-primary-color;
        }
      }
    }
  }
</style>
